<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
     .box {
        width:50px;
        height:50px;
        background-color: red;
        position: absolute;
        left:0px;
        top:0px;
     }
    </style>
</head>
<body>
    <h1>事件 </h1>
    <p>
    页面加载 ：  onload()
    点击事件 ：  onclick()
    信息改变 ：  onchange()
    鼠标悬停上方     onmouseover() 
    鼠标离开         onmouseout()
    鼠标移动       onmousemove()  
    键盘按下    onkeydown()

    </p>
    <button onclick="btn1()"> 1 </button>
    <button> 2 </button>
    <input type="text" onchange="myinput()">
    <select onchange="myinput()">
        <option>米粉</option>
        <option>螺蛳粉</option>
    </select>

    <div class="box"> </div>

 <script>
 
 // 鼠标移动
  let n = 0 ;
  let box =  document.querySelector(".box");
  let bx=0,by =0;
  window.onkeydown = function(){
    let k =  event.keyCode;
    console.log('你按了' +  k);
    if( k == 37){ //左 上 右 下
        bx -=20;
    }else if(k==38){
        by -=20;
    }else if(k==39){
        bx+=20;
    }else if(k==40){
        by+=20;
    }
     box.style.left = bx+ 'px';
     box.style.top = by + 'px';
  }

  window.onmousemove = function(){
    // 鼠标的位置
    //  let x =  event.x;
    //  let y = event.y;
    //  box.style.left = (x-25)+ 'px';
    //  box.style.top = (y-25) + 'px';
  }


  function boxin(){
     let obj = event.srcElement;  //事件源
     console.log('来了....' + obj);
     obj.style.background='url("../img/1.jpg")'
  }
  function boxout(){
    console.log('....走了');
    let obj = event.srcElement;  //事件源
    obj.style.background='url("../img/3.jpg")'
  }


  window.onload = function(){
     console.log('网页加载完毕');
  }

  function btn1(){
    console.log( '你按了一下');
  }

  function myinput(){
     console.log("信息改变时");
  }

 </script>   
</body>
</html>